<template>
  <div class="overview-container">
    <h2>系统总览</h2>
    <div class="core-kpi-row">
      <DeviceOnlineCard />
      <WarningCountCard />
      <TopFaultCard />
      <ActiveUserCard />
    </div>
    <div class="dashboard-grid">
      <OnlineUsers class="dashboard-card" />
      <AgeDistribution class="dashboard-card" />
      <ChinaMap class="dashboard-card" />
      <RegionStepsMap class="dashboard-card" />
    </div>
  </div>
</template>

<script setup>
import OnlineUsers from '../components/OnlineUsers.vue';
import AgeDistribution from '../components/AgeDistribution.vue';
import ChinaMap from '../components/ChinaMap.vue';
import RegionStepsMap from '../components/RegionStepsMap.vue';
import DeviceOnlineCard from '../components/DeviceOnlineCard.vue';
import WarningCountCard from '../components/WarningCountCard.vue';
import TopFaultCard from '../components/TopFaultCard.vue';
import ActiveUserCard from '../components/ActiveUserCard.vue';
</script>

<style scoped>
.overview-container {
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.core-kpi-row {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}
.dashboard-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0;
  width: 100%;
  height: 100%;
}
.dashboard-card {
  background: white;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  width: 100%;
  height: 100%;
  margin: 0;
}
h2 {
  margin: 0;
  padding: 16px 0 0 0;
  text-align: left;
}
</style>